<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="nickName" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="mobile" placeholder="请输入用户手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="userData" element-loading-text="拼命加载中" style="width: 100%;"
            v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="inviterName" label="邀请人用户名" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="inviterPhone" label="邀请人手机号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="nickName" label="用户昵称" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="password" label="密码" width="120"></el-table-column>
            <!-- <el-table-column align="center" sortable prop="openUid" label="微信号" width="120"></el-table-column> -->
            <el-table-column align="center" prop="imageUrl" label="头像" width="120">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.imageUrl" style="width: 50px;" :src="scope.row.imageUrl"
                        :preview-src-list="[scope.row.imageUrl]"></el-image>
                    <div v-if="scope.row.imageUrl == null">暂无图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="sex" label="性别" width="70" :formatter="sexf"></el-table-column>
            <el-table-column align="center" sortable prop="status" label="状态" width="120"
                :formatter="zhuangTai"></el-table-column>
            <el-table-column align="center" sortable prop="balance" label="余额" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.balance / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="point" label="积分" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="birthday" label="生日" width="120">
                <!-- <template slot-scope="scope">
                    <div>{{ transformYymmddDate(scope.row.birthday) }}</div>
                </template> -->
            </el-table-column>
            <el-table-column align="center" sortable prop="region" label="地区" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="school" label="毕业学校" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="slogan" label="口号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="profession" label="职业/专业" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="hobbies" label="兴趣爱好" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="profile" label="个人简介" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" show-overflow-tooltip width="500px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="Hehuoren(scope.row)">升级合伙人</el-button>
                    <el-button size="mini" type="primary" @click="OpenXiaji(scope.row)">查看用户下级</el-button>
                    <el-button size="mini" type="primary" @click="OpenBianji(scope.row)">修改积分/余额</el-button>
                    <el-button size="mini" type="primary" @click="upUserYes(scope.row)">启用</el-button>
                    <el-button size="mini" type="danger" @click="upUserNo(scope.row)">禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑界面 -->
        <el-dialog title="修改" :visible.sync="editFormVisiible" width="30%">
            <el-form label-width="60px">
                <el-form-item label="余额">
                    <el-input size="small" v-model="xiugai.balance" auto-complete="off" placeholder="请输入余额"></el-input>
                </el-form-item>
                <el-form-item label="积分">
                    <el-input size="small" v-model="xiugai.point" auto-complete="off" placeholder="请输入积分"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upData()">修改</el-button>
            </div>
        </el-dialog>

        <!-- 升级合伙人-->
        <el-dialog title="升级为合伙人" :visible.sync="editFormVisiibleSj" width="30%">
            <el-form label-width="60px">
                <el-form-item label="状态">
                    <el-select v-model="shengji.memberId" placeholder="请选择合伙人类型" size="small">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialogSj()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="shengjiUser()">升级</el-button>
            </div>
        </el-dialog>

        <!-- 查看用户下级详情 -->
        <el-dialog title="用户下级列表：" :visible.sync="editFormDetails" width="40%">
            <div style="margin-bottom: 20px;">下级数量：{{ this.inviterListCount }}</div>
            <el-table size="small" :data="Details" highlight-current-row v-loading="loading" border
                element-loading-text="拼命加载中" style="width: 100%;" v-if="this.inviterListCount > 0">
                <el-table-column align="center" sortable prop="nickName" label="用户名 "></el-table-column>
                <el-table-column align="center" sortable prop="phone" label="手机号"></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getUserList,
    updateUserStatus,
    upUserInfo,
    getUserSubList,
    addPartner,
    getMemberList
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false,
            nickName: '',
            mobile: '',
            userData: [],
            options: [{
                value: 0,
                label: '待处理'
            }, {
                value: 1,
                label: '已处理'
            }],
            options1: [],
            editFormVisiible: false,
            xiugai: {
                id: '',
                balance: '',
                point: ''
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
            editFormDetails: false,
            inviterListCount: '',
            Details: [],
            editFormVisiibleSj: false,
            shengji: {
                id: '',
                memberId: ''
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getdata(1)
        this.getShuju()
    },
    methods: {
        // 获取合伙人类型列表
        getShuju() {
            getMemberList().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.list.forEach((item) => {
                        this.options1.push({ label: item.name, value: item.id })
                    })
                    return;
                }
            })
        },
        // 修改升级
        shengjiUser() {
            this.loading = true
            addPartner(this.shengji).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiibleSj = false
                    this.$message.success(res.msg)
                    this.getdata(this.pageparm.currentPage)
                } else {
                    this.editFormVisiibleSj = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 关闭编辑对话框
        closeDialogSj() {
            this.editFormVisiibleSj = false
            this.$message({
                type: 'info',
                message: '已取消升级'
            })
        },
        // 升级为合伙人
        Hehuoren(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiibleSj = true;
                    this.shengji.id = row.id;
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 打开用户下级列表
        OpenXiaji(row) {
            this.loading = true;
            this.editFormDetails = true;
            let data = {
                userId: row.id
            }
            getUserSubList(data).then((res) => {
                this.loading = false;
                console.log(res)
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    });
                } else {
                    this.inviterListCount = res.data.inviterListCount
                    this.Details = res.data.inviterList;
                    return;
                }
            })
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        exportExcel() {
            // 获取反馈列表
            var parameter = {
                page: -2,
                nickName: this.nickName,
                mobile: this.mobile,
            }
            getUserList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.userData = res.data.list;
                    return;
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getdata(1)
            }, 2000);
        },

        // 修改
        upData() {
            this.loading = true
            this.xiugai.balance *= 100
            this.xiugai.balance = this.xiugai.balance.toFixed(0)
            upUserInfo(this.xiugai).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getdata(this.pageparm.currentPage)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 打开编辑器
        OpenBianji(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiible = true;
                    if (row != undefined && row != "undefined") {
                        this.xiugai.id = row.id;
                        this.xiugai.balance = row.balance / 100;
                        this.xiugai.point = row.point;
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 启用
        upUserYes(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm("确定启用吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "success",
                    }).then(() => {
                        let data = {
                            id: row.id,
                            status: 0
                        }
                        updateUserStatus(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getdata(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                    }).catch((err) => {
                        this.$message({
                            type: "info",
                            message: "已取消启用",
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });

        },
        // 禁用
        upUserNo(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm("确定禁用吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "error",
                    }).then(() => {
                        let data = {
                            id: row.id,
                            status: 1
                        }
                        updateUserStatus(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getdata(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                    }).catch((err) => {
                        this.$message({
                            type: "info",
                            message: "已取消禁用",
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 性别
        sexf: function (row) {
            if (row.sex == 1) {
                return "男"
            } else {
                return "女"
            }
        },
        // 状态
        zhuangTai: function (row) {
            if (row.status == 0) {
                return "启用"
            } else if (row.status == 1) {
                return "禁用"
            }
        },
        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.nickName = ''
            this.mobile = ''
            this.getdata(1)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            // 获取反馈列表
            var parameter = {
                page: (page - 1) * 20,
                nickName: this.nickName,
                mobile: this.mobile,
            };
            getUserList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.userData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }


}
</script>

<style></style>